<template>
  <div>首页</div>
  <div class="pie-container">
    <div class="flex">
      <el-radio-group v-model="pieType" size="large">
        <el-radio-button label="sale_">销量</el-radio-button>
        <el-radio-button label="_money">销售额</el-radio-button>
      </el-radio-group>
      <el-select v-model="pieDay" class="m-2" placeholder="Select" size="large">
        <el-option
          v-for="item in pieDays"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div id="pie" style="width: 100%; height: 400px"></div>
  </div>
  <div class="map-container">
    <div id="map" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import { stat } from "@/api";
// 直接把地址的json数据导入
import china from "@/assets/json/china.json";
type EChartsOption = echarts.EChartsOption;

// pieType 要得到的就是 sale_ 或者 _money
const pieType = ref<"sale_" | "_money">("sale_");
const pieDay = ref("yesterday");
const pieDays = [
  {
    label: "昨天",
    value: "yesterday",
  },
  {
    label: "今天",
    value: "today",
  },
  {
    label: "前3天",
    value: "three_days",
  },
  {
    label: "前7天",
    value: "seven_days",
  },
  {
    label: "前14天",
    value: "fourteen_days",
  },
];
let pieData: IPieItem[] = [];
var pieChart: echarts.ECharts;
var pieOption: EChartsOption;

onMounted(() => {
  stat.getIndexStatApi().then((res) => {
    pieData = res.data.salePie;
    // 这个是饼图数据
    // res.data.salePie
    // 图表的数据要求的是 {name,value}
    // 对请求回来的数据进行转换
    const data = res.data.salePie.map((item) => ({
      name: item.name,
      value: item.sale_yesterday, // 默认一开始显示的是的 昨天的销量
    }));
    // 数据从series[0].data传入
    // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
    // 不能直接 [索引] 访问
    // 收缩类型 , 然后把数据传入
    (pieOption.series as echarts.SeriesOption[])[0].data = data;
    // 这就是数据渲染
    pieOption && pieChart.setOption(pieOption);

    // 可以把地图数据传入里面
    initMap(res.data.saleMap);
  });

  var chartDom = document.getElementById("pie")!;
  pieChart = echarts.init(chartDom);
  pieOption = {
    // 鼠标移动到对应的数据上之后的提示
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(50,50,50,.7)",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}: {c},({d}%)",
    },
    // 图例
    legend: {
      top: "5%",
      left: "right",
      orient: "vertical",
      height: 100,
    },
    series: [
      {
        // name: "Access From",
        left: "-30%",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "outside",
        },
        // 高亮状态
        emphasis: {
          label: {
            show: true,
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          // 图表要求的数据格式： {name,value}
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };
});

// 当 pieDay 和 pieType 任何一个发生变化，都应该修改 饼图的数据
// 做法有很多种， radio 和 select 都有 change 事件，可以做 pieDay 和 pieType 变化时的处理
// change事件相对麻烦一些，建议使用 watch
watch([pieDay, pieType], () => {
  let key = "";
  if (pieType.value === "sale_") {
    key = pieType.value + pieDay.value;
  } else {
    key = pieDay.value + pieType.value;
  }
  // 根据key 取出数据，重新渲染
  const data = pieData.map((item) => ({
    name: item.name,
    // 根据动态生成的 key 取出对应的数据
    value: item[key], // 默认一开始显示的是的 昨天的销量
  }));
  (pieOption.series as echarts.SeriesOption[])[0].data = data;
  pieChart.setOption(pieOption);
});

// 地图的使用：
// 1. 需要一个json数据，让这些json数据告诉我们现在这个地图要展示哪些地区
// http://datav.aliyun.com/portal/school/atlas/area_selector  去这获取我们想要地图信息

function initMap(mapData: IMapItem[]) {
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById("map")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  echarts.registerMap("HK", china as any);

  // 转换mapData 为 {name,value} 的形式
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));

  myChart.setOption(
    (option = {
      title: {
        left: "center",
        text: "全国销量分布图",
        textStyle: {
          color: "#333",
          fontSize: 20,
          fontWeight: "normal",
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>销量：{c}",
        backgroundColor: 'rgba(70,70,70,.7)',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        min: 0,
        max: 1000000,
        realtime: true,
        calculable: true,
        inRange: {
          color: ["#fff", "pink", "orange", 'red', 'gold'],
        },
      },
      series: [
        {
          // zoom: 1.2,
          type: "map",
          map: "HK",
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: false

            },
            itemStyle: {
              areaColor: '#0a0'
            }
          },
          data,
        },
      ],
      // 一定要保证 后端返回的name 要和 json 里面的 name 要一致，如果不一致，需要自己在下面进行映射
      // nameMap: {
      //   "四川省": "四川",
      // },
    })
  );
  option && myChart.setOption(option);
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
</style>
